<template>
	<view class="content">
		<!-- 退款原因 -->
		<uni-popup :show="type === 'fundreson'" position="bottom" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view style="display: flex;flex-direction: column;background-color: #fff;border-radius: 30upx 30upx 0 0;">
				<view style="font-size: 32upx;color: #333;text-align: center;">退款原因</view>
				<view>
					<radio-group @change="radioChange" style="padding:20upx 30upx;">
						<label style="display: flex;justify-content: space-between;border-bottom:2upx solid #eee" v-for="(item, index) in fundReason" :key="index">
							<view style="color: #333;font-size: 30upx;">{{item}}</view>
							<view>
								<radio :value="item" :checked="index === current" />
							</view>
						</label>
					</radio-group>
				</view>
				<button class="reasonConfirm" @click="sureReason(1)">确定</button>
			</view>
		</uni-popup>
		<!-- 货物状态 -->
		<uni-popup :show="type === 'goodstate'" position="bottom" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view style="display: flex;flex-direction: column;background-color: #fff;border-radius: 30upx 30upx 0 0;">
				<view style="font-size: 32upx;color: #333;text-align: center;">货物状态</view>
				<view>
					<radio-group @change="radiostateChange" style="padding:20upx 30upx;">
						<label style="display: flex;justify-content: space-between;border-bottom:2upx solid #eee" v-for="(item, index) in fundState" :key="index">
							<view style="color: #333;font-size: 30upx;">{{item}}</view>
							<view>
								<radio :value="item" :checked="index === goodcurrent" />
							</view>
						</label>
					</radio-group>
				</view>
				<button  class="reasonConfirm" @click="sureReason(2)">确定</button>
			</view>
		</uni-popup>
		<view class="pageHeader">
			申请退款
			<a class="generalBack" @click="backpage()" hover-class="none">
				<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
		</view>
		<view class="regoodbox">
			<view style="display: flex;padding:0 16upx;margin-top: 30upx;background: #fff;">
				<view style="width: 164upx;height: 164upx;position: relative;">
					<image :src="passOrder.images" style="width:164upx;height: 164upx;"></image>
				</view>
				<view style="margin-left: 30upx;font-size: 28upx;color: #333;line-height: 1.5;">
					<view class="goods-info">{{passOrder.title}}</view>
					<view style="margin-top: 8upx;color: #EC6104;">{{goodsMsg.payment_id=='6'?passOrder.integral/passOrder.buy_number+'VS':'￥'+passOrder.total_price}} x {{passOrder.buy_number}}</view>
					<view style="margin-top: 10upx;font-size: 24upx;">支付方式：{{goodsMsg.payment_name}}</view>
				</view>
			</view>
			
			<view style="margin: 20upx 0;background: #fff;padding:30upx ">
				<view style="display: flex;justify-content: space-between;margin-bottom: 30upx;" v-if="state==1" @click="showgoodState(1)">
					<text style="color:#333;font-size: 28upx;">货物状态</text>
					<view style="display: flex;align-items: center;">
						<text style="color:#999;font-size: 28upx;">{{fundStateTxt==''?'请选择':fundStateTxt}}</text>
						<image src="../../static/f-1.png" style="width: 12upx;height: 20upx;margin-left: 34upx;"></image>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;" @click="showgoodState(2)">
					<text style="color:#333;font-size: 28upx;">退款原因</text>
					<view style="display: flex;align-items: center;">
						<text style="color:#999;font-size: 28upx;">{{fundReasontxt==''?'请选择':fundReasontxt}}</text>
						<image src="../../static/f-1.png" style="width: 12upx;height: 20upx;margin-left: 34upx;"></image>
					</view>
				</view>
			</view>
			
			<view style="background-color: #fff;padding: 30upx;font-size:28upx;color: #333;">
				<view>退款金额：<text style="color: #EC6104;margin-left: 20upx;">{{goodsMsg.payment_id=='6'?passOrder.integral+'VS':'￥'+passOrder.total_price}}</text></view>
				<!-- <view style="font-size: 24upx;color: #999;margin: 20upx 0;">最多 ￥{{passOrder.total_price}}</view> -->
				<view style="display: flex;">
					<text>退款说明:</text>
					<textarea value="" v-model="fundbackMsg" placeholder="选填" style="font-size: 28upx;color: #666;margin-left: 30upx;flex:1;" maxlength="180" auto-height/>
				</view>
			</view>
			
			<view style="background-color: #fff;padding: 30upx;font-size:28upx;color: #333;">
				<view>上传凭证</text></view>
				<view class="fujiBox" style="padding: 0 20upx;display: flex;flex-wrap: wrap;margin-top: 30upx;">
					<view style="margin:0 .5% 20upx 0;width:24%;height: 150upx;">
						<view style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;border:2upx dashed #999" v-if="list.length < 4" @click="chooseIMG">
							<image class="" src="../../static/f-2.png" style="width: 68upx;height: 54upx;"></image>
						</view>
					</view>
					<view class="several " v-for="(item,index) in list" :key="index" style="position: relative;margin-bottom: 20upx;">
						<image :src="item" style="width: 100%;height: 100%;"></image>
					</view>
				</view>
			</view>
		</view>
		<button class="reasonConfirm" style="position: fixed;left:0;bottom:0;width: 100%;" @click="submitfund"  :disabled="btnstate">提交</button>
	</view>
	</template>
	<script>
	import postAjax from '../../API/postAjax.js'
	import * as util from '../../common/util.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				btnstate:false,
				userToken:'',// token
				state:'',// 退货退款 退款状态
				passOrder:{},//传过来的数据
				orderId:'',//外部订单id
				imgCurrent:0,
				list:[],//图片信息
				type:'',//弹窗类型,
				fundReason:[],// 退款原因
				fundReasontxt:'',
				fundState:['已收到货','未收到货'],// 货物状态,
				fundStateTxt:'',
				current: 0,//退款current
				goodcurrent: 0,//货物current
				fundbackMsg:'',//退款说明
				goodsMsg:{}// 商品信息
			}
		},
		components:{
			uniPopup
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.passOrder = JSON.parse(options.order)// 订单数据
			that.state = options.type// 是否是退款还是退货退款
			that.orderId = options.orderid // 外部订单id
			console.log(JSON.parse(options.order),that.state,that.orderId)
			that.getCharacter()
		},
		methods: {
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			async submitfund(){
				let that = this
				console.log(that.list)
				if(that.fundStateTxt==''&&that.state==1){
					uni.showToast({
						title: '请选择货物状态',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if(that.fundReasontxt==''){
					uni.showToast({
						title: '请选择退款原因',
						icon: 'none',
						duration: 2000
					})
					return
				}
				// if(that.fundbackMsg==''){
				// 	uni.showToast({
				// 		title: '请输入退款说明',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return
				// }
				let imgArr = []
				let postData = {}
				if(that.list.length>=1){
					imgArr = await that.upImg()
					// console.log(imgArr)
					// let orArr = imgArr.map(item => item)
					// let pastArr =  [... new Set(orArr)]
					postData = {
						token:that.userToken,//token
						order_id:that.orderId,//外部订单ID
						order_detail_id:that.passOrder.id,//商品ID
						type:that.state,//退款类型
						price:that.passOrder.total_price,//退款总价
						reason:that.fundReasontxt,
						images:imgArr,
						msg:that.fundbackMsg
					}
				}else{
					postData = {
						token:that.userToken,//token
						order_id:that.orderId,//外部订单ID
						order_detail_id:that.passOrder.id,//商品ID
						type:that.state,//退款类型
						price:that.passOrder.total_price,//退款总价
						reason:that.fundReasontxt,
						msg:that.fundbackMsg,
						
					}
				}
				console.log(postData)
				that.btnstate=true
				setTimeout(()=>{
					that.btnstate=false   //点击一次时隔两秒后才能再次点击
				},3000)
				postAjax('Orderaftersale/Create',postData,function(data){
					if(data.code==0){
						uni.showToast({
							title: '申请成功',
							icon: 'none',
							duration: 2000
						})
						setTimeout(function(){
							uni.navigateTo({
								url:'../user/index?state=0'
							})
						},500)
					}else{
						uni.showToast({
							title: '申请失败，请稍后重试',
							icon: 'none',
							duration: 2000
						})
						that.fundReasontxt=''
						that.fundStateTxt=''
						that.current=0
						that.goodcurrent=0
						that.fundbackMsg=''
					}
				})
			},
			showgoodState(num){
				if(num==1){
					this.type='goodstate'
				}else{
					this.type='fundreson'
				}
			},
			// 选择原因
			sureReason(num){
				if(num==1){
					this.fundReasontxt = this.fundReason[this.current]
				}else{
					this.fundStateTxt = this.fundState[this.goodcurrent]
				}
				this.type=''
			},
			// 获取退货原因和货物状态
			getCharacter(){
				let that = this
				postAjax('Orderaftersale/Aftersale',{
					token:that.userToken,
					oid:that.orderId,
					did:that.passOrder.id
				},function(data){
					if(that.state==0){
						that.fundReason = data.data.return_only_money_reason
						that.goodsMsg  = data.data.order_data
					}else if(that.state==1){
						that.fundReason = data.data.return_money_goods_reason
						that.goodsMsg  = data.data.order_data
					}else{
						that.fundReason = []
						that.goodsMsg= {}
					}
				})
			},
			togglePopup(type) {
				this.type = type;
			},
			radioChange(evt) {
				for (let i = 0; i < this.fundReason.length; i++) {
					if (this.fundReason[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			radiostateChange(evt) {
				for (let i = 0; i < this.fundState.length; i++) {
					if (this.fundState[i].value === evt.detail.value) {
						this.goodcurrent = i;
						break;
					}
				}
			},
			// 选择图片
			chooseIMG() {
				let that = this;
				let a = 3 - that.list.length
				uni.chooseImage({
					count: a,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera '], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res), res.tempFilePaths[0])
						for(let i=0;i<res.tempFilePaths.length;i++){
							that.list.push(res.tempFilePaths[i])
						}
					}
				});
			},
			// 上传图片
			upImg(){
				return new Promise((presolve, preject) => {
					let that = this
					if(that.list.length==0){
						presolve([])
						return
					}
					uni.showLoading({
						mask:true
					})
					let uploadFile = []
					let token = uni.getStorageSync('token')
					let url="ueditor/Index?action=uploadimage&path_type=aftersale_2_15_27&token"+token
					that.list.forEach((item,i)=>{
						uploadFile[i] = new Promise ((resolve)=>{
							util.uploadIMGS(url,item,function(data){
								console.log(JSON.parse(data.data))
								resolve(JSON.parse(data.data).data.url)
								
							})
						})
					})
					Promise.all(uploadFile).then(res=>{
						presolve(res)
						uni.hideLoading()
					}).catch(err=>{
						preject(err)
						uni.hideLoading()
						uni.showToast({
						  title:'上传失败请重试',
						  icon:'none'
						})
					})
				})
			},
			orderdelivery(orderid,deliveryid) {
				let that = this
				postAjax('order/logistics',{
					token:that.userToken,
					express_id:orderid,
					express_number:deliveryid,
				},function(data){
					console.log(data)
					if(data.code==0){
						that.tracesData = data.data.data
						that.deliverState = data.data.state
						that.delivertxt = that.stateTxt(that.deliverState)
					}else{
						uni.showToast({
						  title:'物流查询失败',
						  icon:'none'
						})
					}
					
				})
			}
		}
	}
	
</script>

<style>
	.fujiBox>.several{ width: 24%;height: 156upx;margin:0 .5%;}
	/* .fujiBox>.several:nth-child(4n+2),.fujiBox>.several:nth-child(4n+3){margin:0 .5%;} */
	.content{min-height: 100vh;background-color: #F9F9F9;}
	.pageHeader{position: fixed;top:0;left:0;z-index:999;width: 100%;height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.regoodbox{padding: 160upx 0upx 102upx;}
	.total-wrap {
	  width: 100vw;
	  height: auto;
	  box-sizing: border-box;
	  padding: 20upx;
	}
	.reasonConfirm{display: block;border:0;background-color: #1D84E8;width: 100%;border-radius: 0;color: #fff;}
	.goods-info{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;}
	.logistics-title {
		position: relative;
	    box-sizing: border-box;
	    padding:16upx 0;
		border-bottom:2upx solid #EEEEEE;
	    line-height: 28upx;
	    color: #4B4B4B;
	    font-size: 26upx;
	    font-family: 'PingFangSC-Medium';
	    text-align: left;
	}
	.uni-list-cell {
		justify-content: flex-start
	}
</style>
